<template>
	<view class="setting_wrap">
		<view
			class="setting_btn flex align-center justify-center" 
			hover-class="setting_btn_hover"
			@tap="openOptions"
		>
			<text class="lg cuIcon-settings setting_font text-center text-gray"></text>
		</view>
		
		<view
			v-show="isShowOtherEnter"
			v-for="item in innerList"
			:key="item.title"
			:data-id="item.id"
			@click="settingItemClick"
			class="setting_btn_item padding-lr-xl text-white text-df">{{item.title}}</view>
		<view v-show="isShowOtherEnter" class="setting_mask" @click="openOptions"></view>
		<exchange-num ref="exchangeNum" />
	</view>
</template>

<script>
	import exchangeNum from "./exchange_num";
	export default {
		props:{
			list:{
				type: Array,
				default: function() {
					return [{title:"一转一",id:"onetoone"}];
				}
			}
		},
		computed:{
			innerList:function() {
				let initList = [{title:"个性配置",id:"setting"},{title:"大写转换",id:"exchangeNum"}];
				return initList.concat(this.list)
			}
		},
		components:{
			exchangeNum: exchangeNum
		},
		data() {
			return {
				isShowOtherEnter: false
			}
		},
		methods:{
			openOptions() {
				this.isShowOtherEnter = !this.isShowOtherEnter;
			},
			settingItemClick(e) {
				let id = e.currentTarget.dataset.id;
				this.$emit("itemClick", id);
				this.isShowOtherEnter = false;
				if (id == "setting") {
					uni.switchTab({
						url:"/pages/my/my"
					})
				} else if(id == "exchangeNum") {
					this.$refs.exchangeNum.showModal();
				}
			}
		}
	}
</script>

<style>
	.setting_wrap{
		position: fixed;
		bottom: 40rpx;
		right: 20rpx;
		width:90rpx;
		height:90rpx;
		z-index:999;
	}
	.setting_btn{
		width:90rpx;
		height:90rpx;
		border-radius: 50%;
		transition: transform 0.4s;
		box-shadow: 0 0 10rpx rgba(0,0,0,0.3);
		border:1rpx solid #ccc;
		position: relative;
		z-index:5;
		background-color: #fff;
	}
	.setting_font{
		font-size:80rpx!important;
	}
	.setting_btn_hover{
		transform: rotateZ(180deg);
	}
	.setting_btn_item{
		height:80rpx;
		line-height: 80rpx;
		border-radius:40rpx;
		position: absolute;
		text-align: center;
		white-space: nowrap;
		z-index:5;
		box-shadow: 0 0 5rpx rgba(0,0,0,0.3);
	}
	.setting_btn_item:nth-of-type(2) {
		top:-90rpx;
		right:0;
		background-color:#39b54a;
	}
	.setting_btn_item:nth-of-type(3) {
		top:-180rpx;
		right:0;
		background-color:#333333;
	}
	.setting_btn_item:nth-of-type(4) {
		top:-270rpx;
		right:0;
		background-color:#6739b6;
	}
	.setting_btn_item:nth-of-type(5) {
		top:-360rpx;
		right:0;
		background-color:#1cbbb4;
	}
	.setting_mask{
		width:100%;
		height:100%;
		position: fixed;
		top:0;
		left:0;
		background-color: rgba(0,0,0,0.5);
	}
</style>
